Welcome to Css!

6.05 元素显隐

1、元素隐藏:display:none

页面结构仍然存在,元素所占的空间会被隐藏

2、元素显示,

display:block 块级元素显示

display:inline 行级元素显示

display:inline-block 行级元素显示

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

div{background:green;width:200px;height:80px;display:none}

span{background:red}

</style>

</head>

<body>

<div>我要好好学习1</div>

<span>我要好好学习2</span>

</body>

</html>

返回值:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

div{background:green;width:200px;height:80px;display:none}

.one{display:block}

span{background:red}

.two{display:block}

</style>

</head>

<body>

<div class="one">我要好好学习1</div>

<span class="two">我要好好学习2</span>

</body>

</html>

返回值:

div元素可以显示,并且可以设置完高,而span元素也可以显示,而span宽高没有设置变成块级元素,宽高铺满了浏览器。